<template>
	<view>
		<van-nav-bar title="买入订单" left-text="返回" left-arrow @click-left="onClickLeft" />
		<view class="head">
			<van-tabs active="a">
				<van-tab title="未付款" name="a">
					<view v-show="empty" style="margin-top: 100px;">
						<van-empty description="暂无订单" />
					</view>
					<!-- 正常未付款订单 -->
					<view style="margin-top: 20px;" v-for="(item,index) in order" :key="index" v-show="item.orderState==0">
						<view style="display: flex;margin-left: 30rpx;">
							<view style="width: 10%;">
								<img style="width: 50rpx;height: 50rpx;border-radius:100% ;"
									:src="item.userPhoto"
									alt="">
							</view>
							<view style="width: 70%;">
								{{item.userName}}
							</view>
							<view style="width: 20%;text-align: right;margin-right: 30rpx;color: darkorange;">
								未付款
							</view>
						</view>
						<view style="display: flex;margin-left: 30rpx;">
							<view class="">
								<img style="width: 100rpx;height: 100rpx;"
									:src="item.commodityImg"
									alt="">
							</view>
							<view class="">
								<view
									style="font-weight: bold; margin-left: 30rpx; width: 560rpx;overflow: hidden;white-space: nowrap;text-overflow: ellipsis; ">
									{{item.commodityName}}
				 			</view>
								<view style="width: 590rpx;text-align: right;color: darkgrey;">
									实付：￥{{item.orderPrice}}
								</view>
							</view>
						</view>
						<view style="display: flex;margin-top: 10px;">
							<button @click="chat(item.sellerTel)" style="width: 90px;height:50rpx;font-size: 15px;line-height: 50rpx;" >联系卖家</button>
							<button @click="payment(item.orderId,1)" style="width: 90px;height:50rpx;font-size: 15px;line-height: 50rpx;">去付款</button>
						</view>
						<van-divider />
					</view>
					<!-- 拍卖未付款订单 -->
					<view style="margin-top: 20px;" v-for="(item,index) in auctionOrder" :key="index" v-show="item.orderState==0">
						<view style="display: flex;margin-left: 30rpx;">
							<view style="width: 10%;">
								<img style="width: 50rpx;height: 50rpx;border-radius:100% ;"
									:src="item.userPhoto"
									alt="">
							</view>
							<view style="width: 70%;">
								{{item.userName}}
							</view>
							<view style="width: 20%;text-align: right;margin-right: 30rpx;color: darkorange;">
								未付款
							</view>
						</view>
						<view style="display: flex;margin-left: 30rpx;">
							<view class="">
								<img style="width: 100rpx;height: 100rpx;"
									:src="item.commodityImg"
									alt="">
							</view>
							<view class="">
								<view
									style="font-weight: bold; margin-left: 30rpx; width: 560rpx;overflow: hidden;white-space: nowrap;text-overflow: ellipsis; ">
									{{item.commodityName}}
							</view>
								<view style="width: 590rpx;text-align: right;color: darkgrey;">
									实付：￥{{item.dealmoney}}
								</view>
							</view>
						</view>
						<view style="display: flex;margin-top: 10px;">
							<button  @click="chat(item.sellerTel)" style="width: 90px;height:50rpx;font-size: 15px;line-height: 50rpx;" >联系卖家</button>
							<button @click="payment(item.auctionKnockdownId,2)" style="width: 90px;height:50rpx;font-size: 15px;line-height: 50rpx;">去付款</button>
						</view>
						<van-divider />
					</view>


				</van-tab>
				
				<!-- 正常订单已付款 -->
				<van-tab title="已付款" name="b">
					<view v-show="auctionempty" style="margin-top: 100px;">
						<van-empty description="暂无订单" />
					</view>
					<view style="margin-top: 20px;"  v-for="(item,index) in order" :key="index" v-show="item.orderState==1">
						<view style="display: flex;margin-left: 30rpx;">
							<view style="width: 10%;">
								<img style="width: 50rpx;height: 50rpx;border-radius:100% ;"
									:src="item.userPhoto"
									alt="">
							</view>
							<view style="width: 70%;">
								{{item.userName}}
							</view>
							<view style="width: 20%;text-align: right;margin-right: 30rpx;color: darkorange;">
								已付款
							</view>
						</view>
						<view style="display: flex;margin-left: 30rpx;">
							<view class="">
								<img style="width: 100rpx;height: 100rpx;"
									:src="item.commodityImg"
									alt="">
							</view>
							<view class="">
								<view
									style="font-weight: bold; margin-left: 30rpx; width: 560rpx;overflow: hidden;white-space: nowrap;text-overflow: ellipsis; ">
									{{item.commodityName}}
							</view>
								<view style="width: 590rpx;text-align: right;color: darkgrey;">
									实付：￥{{item.orderPrice}}
								</view>
							</view>
						</view>
						<view style="display: flex;margin-top: 10px;">
							<button  @click="chat(item.sellerTel)" style="width: 90px;height:50rpx;font-size: 15px;line-height: 50rpx;">联系卖家</button>
							<button @click="selectNumber(item)" style="width: 90px;height:50rpx;font-size: 15px;line-height: 50rpx;">查看物流</button>
							<button @click="goAppraise(item)" style="width: 90px;height:50rpx;font-size: 15px;line-height: 50rpx;">去评价</button>
						</view>
						
						<!-- <van-dialog use-slot title="评价" :show="showAppraise" show-cancel-button @confirm="getAppraise(item)"
							@cancel="CloseAppraise">
							<view style="display:flex">
								<view style="margin-left: 30rpx;">
									评价：
								</view>
								<input v-model="Appraise" placeholder="请输入评价内容">
							</view>
							
							<view style="display:flex">
								<view style="margin-left: 30rpx;">
									评分：
								</view>
								<van-rate :value="value" @change="onChange" />
							</view>
							
							<view style="margin: 30rpx 200rpx;">
								<van-uploader @after-read="PutPhoto">
									<button style="font-size: 40rpx;width: 250rpx;">上传图片</button>
								</van-uploader>
							</view>
							<view style="margin-left: 30rpx;">
								<van-checkbox :value="checked" @change="anonymity">是否匿名</van-checkbox>
							</view>
						</van-dialog> -->
						<van-divider />
					</view>
					<van-dialog use-slot title="查看物流单号" :show="showNumber" show-cancel-button @confirm="getNumber"
						@cancel="CloseNumber">
						<view style="display:flex">
							<view v-show="wuliu.expressNumber.length>0" style="margin-left: 30rpx;">
								快递单号：{{wuliu.expressNumber}}
							</view>
							<view v-show="wuliu.expressNumber.length==0 || wuliu.expressNumber==null" style="margin-left: 30rpx;">
								快递单号：暂无物流信息
							</view>
						</view>
					</van-dialog>
					<van-dialog use-slot title="评价" :show="showAppraise" show-cancel-button @confirm="getAppraise"
						@cancel="CloseAppraise">
						<view style="display:flex">
							<view style="margin-left: 30rpx;">
								评价：
							</view>
							<input v-model="Appraise" placeholder="请输入评价内容">
						</view>
						
						<view style="display:flex">
							<view style="margin-left: 30rpx;">
								评分：
							</view>
							<van-rate :value="value" @change="onChange" />
						</view>
						
						<view style="margin: 30rpx 200rpx;">
							<van-uploader @after-read="PutPhoto">
								<button style="font-size: 40rpx;width: 250rpx;">上传图片</button>
							</van-uploader>
						</view>
						<view style="margin-left: 30rpx;">
							<van-checkbox :value="checked" @change="anonymity">是否匿名</van-checkbox>
						</view>
					</van-dialog>
					
					<!-- 拍卖订单已付款 -->
					<view style="margin-top: 20px;" v-for="(item,index) in auctionOrder" :key="index" v-show="item.orderState==1">
						<view style="display: flex;margin-left: 30rpx;">
							<view style="width: 10%;">
								<img style="width: 50rpx;height: 50rpx;border-radius:100% ;"
									:src="item.userPhoto"
									alt="">
							</view>
							<view style="width: 70%;">
								{{item.userName}}
							</view>
							<view style="width: 20%;text-align: right;margin-right: 30rpx;color: darkorange;">
								已付款
							</view>
						</view>
						<view style="display: flex;margin-left: 30rpx;">
							<view class="">
								<img style="width: 100rpx;height: 100rpx;"
									:src="item.commodityImg"
									alt="">
							</view>
							<view class="">
								<view
									style="font-weight: bold; margin-left: 30rpx; width: 560rpx;overflow: hidden;white-space: nowrap;text-overflow: ellipsis; ">
									{{item.commodityName}}
							</view>
								<view style="width: 590rpx;text-align: right;color: darkgrey;">
									实付：￥{{item.dealmoney}}
								</view>
							</view>
						</view>
						<view style="display: flex;margin-top: 10px;">
							<button  @click="chat(item.sellerTel)" style="width: 90px;height:50rpx;font-size: 15px;line-height: 50rpx;" >联系卖家</button>
							<button @click="selectNumber(item)" style="width: 90px;height:50rpx;font-size: 15px;line-height: 50rpx;">查看物流</button>
							<button @click="goAppraise1(item)" style="width: 90px;height:50rpx;font-size: 15px;line-height: 50rpx;">去评价</button>
						</view>
						
						<!-- <van-dialog use-slot title="评价" :show="showAppraise1" show-cancel-button @confirm="getAppraise1(item)"
							@cancel="CloseAppraise1">
							<view style="display:flex">
								<view style="margin-left: 30rpx;">
									评价：
								</view>
								<input v-model="Appraise1" placeholder="请输入评价内容">
							</view>
							
							<view style="display:flex">
								<view style="margin-left: 30rpx;">
									评分：
								</view>
								<van-rate :value="value1" @change="onChange1" />
							</view>
							
							<view style="margin: 30rpx 200rpx;">
								<van-uploader @after-read="PutPhoto1">
									<button style="font-size: 40rpx;width: 250rpx;">上传图片</button>
								</van-uploader>
							</view>
							<view style="margin-left: 30rpx;">
								<van-checkbox :value="checked1" @change="anonymity1">是否匿名</van-checkbox>
							</view>
						</van-dialog> -->
						<van-divider />
					</view>
					<van-dialog use-slot title="评价" :show="showAppraise1" show-cancel-button @confirm="getAppraise1"
						@cancel="CloseAppraise1">
						<view style="display:flex">
							<view style="margin-left: 30rpx;">
								评价：
							</view>
							<input v-model="Appraise1" placeholder="请输入评价内容">
						</view>
						
						<view style="display:flex">
							<view style="margin-left: 30rpx;">
								评分：
							</view>
							<van-rate :value="value1" @change="onChange1" />
						</view>
						
						<view style="margin: 30rpx 200rpx;">
							<van-uploader @after-read="PutPhoto1">
								<button style="font-size: 40rpx;width: 250rpx;">上传图片</button>
							</van-uploader>
						</view>
						<view style="margin-left: 30rpx;">
							<van-checkbox :value="checked1" @change="anonymity1">是否匿名</van-checkbox>
						</view>
					</van-dialog>
				</van-tab>
				
				<van-tab title="已评价" name="c" >
					<!-- 正常已评价订单 -->
					<view v-show="evaluate" style="margin-top: 100px;">
						<van-empty description="暂无订单" />
					</view>
					<view style="margin-top: 20px;" v-for="(item,index) in order" :key="index" v-show="item.orderState==2">
						<view style="display: flex;margin-left: 30rpx;">
							<view style="width: 10%;">
								<img style="width: 50rpx;height: 50rpx;border-radius:100% ;"
									:src="item.userPhoto"
									alt="">
							</view>
							<view style="width: 70%;">
								{{item.userName}}
							</view>
							<view style="width: 20%;text-align: right;margin-right: 30rpx;color: darkorange;">
								已评价
							</view>
						</view>
						<view style="display: flex;margin-left: 30rpx;">
							<view class="">
								<img style="width: 100rpx;height: 100rpx;"
									:src="item.commodityImg"
									alt="">
							</view>
							<view class="">
								<view
									style="font-weight: bold; margin-left: 30rpx; width: 560rpx;overflow: hidden;white-space: nowrap;text-overflow: ellipsis; ">
									苹果{{item.commodityName}}
							</view>
								<view style="width: 590rpx;text-align: right;color: darkgrey;">
									实付：￥{{item.orderPrice}}
								</view>
							</view>
						</view>
						<view style="display: flex;margin-top: 10px;">
							<button  @click="chat(item.sellerTel)" style="width: 90px;height:50rpx;font-size: 15px;line-height: 50rpx;">联系卖家</button>
							<button @click="ComplainSeller(item.commodityId,item.sellerTel)" style="width: 90px;height:50rpx;font-size: 15px;line-height: 50rpx;">投诉卖家</button>
						</view>
						<van-divider />
					</view>
					
					<!-- 拍卖已评价订单 -->
					<view style="margin-top: 20px;" v-for="(item,index) in auctionOrder" :key="index" v-show="item.orderState==2">
						<view style="display: flex;margin-left: 30rpx;">
							<view style="width: 10%;">
								<img style="width: 50rpx;height: 50rpx;border-radius:100% ;"
									:src="item.userPhoto"
									alt="">
							</view>
							<view style="width: 70%;">
								{{item.userName}}
							</view>
							<view style="width: 20%;text-align: right;margin-right: 30rpx;color: darkorange;">
								已付款
							</view>
						</view>
						<view style="display: flex;margin-left: 30rpx;">
							<view class="">
								<img style="width: 100rpx;height: 100rpx;"
									:src="item.commodityImg"
									alt="">
							</view>
							<view class="">
								<view
									style="font-weight: bold; margin-left: 30rpx; width: 560rpx;overflow: hidden;white-space: nowrap;text-overflow: ellipsis; ">
									{{item.commodityName}}
							</view>
								<view style="width: 590rpx;text-align: right;color: darkgrey;">
									实付：￥{{item.dealmoney}}
								</view>
							</view>
						</view>
						<view style="display: flex;margin-top: 10px;">
							<button  @click="chat(item.sellerTel)" style="width: 90px;height:50rpx;font-size: 15px;line-height: 50rpx;" >联系卖家</button>
							<button @click="ComplainSeller(item.commodityId,item.sellerTel)" style="width: 90px;height:50rpx;font-size: 15px;line-height: 50rpx;">投诉卖家</button>
						</view>
						<van-divider />
					</view>
				</van-tab>
			</van-tabs>
		</view>
	</view>
</template>

<script>
	import request from '../../com/request.js'
	export default {
		data() {
			return {
				order: [{
					num: 2,
					tag: "标签",
					price: 10.1,
					desc: "商品描述",
					title: "商品标题",
					thumb: "https://thirdwx.qlogo.cn/mmopen/vi_32/DYAIOgq83epKpyUQib2xIfKmq9ib4C9MNRpxkkyibfnVt9yH7oUDSFzia7ic8WJOUOGru1510s4Wwhr77s0wJFibdKpQ/132"
				}],
				auctionOrder:[],
				empty:true,
				auctionempty:true,
				evaluate:true,
				showNumber:false,
				isNo:0,
				showAppraise:false,
				value:0,
				checked:false,
				Appraise:"",//评论内容
				AppraisePhoto:"",//评论图片
				cryptonym:1,//是否匿名
				showAppraise1:false,
				Appraise1:"",//拍卖订单评价内容
				value1:0,//拍卖订单评分
				AppraisePhoto1:"",//拍卖订单评论图片
				checked1:false,//拍卖订单是否匿名
				cryptonym1:1,
				wuliu:'',
				pingjia:'',
				pingjia1:""
			}
		},
		methods: {
			onClickLeft() {
				uni.redirectTo({
					url: '/pages/MyCenter/MyCenter'
				});
			  },
			selectOrder(){//查看正常买入订单
				request({
					url: 'api/selectOrder/get',
					data: {
						acc: uni.getStorageSync("userTel")
					},
					success: (resp) => {
						this.order=resp.data.data
						console.log(this.order,150);
						this.order.forEach( async item => {
						            if(item.orderState==0){
						            	this.empty=false
						            }
									if(item.orderState==1){
						            	this.auctionempty=false
						            }
									if(item.orderState==2){
										this.evaluate=false
									}
						        });
					}
				})
			},
			selectAuctionOrder(){//查看拍卖买入订单
				request({
					url: 'api/auctionOrder/get',
					data: {
						acc: uni.getStorageSync("userTel")
					},
					success: (resp) => {
						this.auctionOrder=resp.data.data
						console.log(this.auctionOrder,164);
						this.auctionOrder.forEach( async item => {
						            if(item.orderState==0){
						            	this.empty=false
						            }
									if(item.orderState==1){
										this.auctionempty=false
									}
									if(item.orderState==2){
										this.evaluate=false
									}
						        });
					}
				})
			},
			selectNumber(item){
				this.showNumber=true
				this.wuliu=item
			},
			getNumber(){
				this.showNumber=false
			},
			CloseNumber(){
				this.showNumber=false
			},
			goAppraise(item){
				this.showAppraise=true
				this.pingjia=item
			},
			getAppraise(){//添加正常订单评价
				request({
					url: 'api/confirmAppraise/get',
					data: {
						userTel:uni.getStorageSync("userTel"),
						orderId:this.pingjia.orderId,
						sellerTel:this.pingjia.sellerTel,
						commentsToSeller:this.Appraise,
						scoreToSeller:this.value,
						commodityId:this.pingjia.commodityId,
						anonymous:this.cryptonym,
						commentImg:this.AppraisePhoto
					},
					success: (resp) => {
						request({
							url: 'api/changeStatus/get',
							data: {
								orderId:this.pingjia.orderId
							},
							success: (resp) => {
								uni.showToast({
									title: '评价成功',
									icon: "none",
									duration: 2000
								})
								this.selectOrder()
							}
						})
					}
				})
				this.showAppraise=false
			},
			CloseAppraise(){
				this.showAppraise=false
			},
			onChange(event) {
			    this.value=event.detail
			  },
			anonymity(){
				console.log(this.checked)
				if(this.checked==false){
					this.cryptonym=1
					this.checked=true
				}else if(this.checked==true){
					this.cryptonym=0
					this.checked=false
				}
			},
			PutPhoto(res){//上传评论图片
				let that = this
				let tempFilePaths = res.detail.file.thumb
				uni.uploadFile({
					url: 'http://112.74.185.144:8000/api/common/uploadfile',
					filePath: tempFilePaths,
					name: 'file',
					formData: {
						'file': tempFilePaths
					}
				}).then(resp => {
					that.AppraisePhoto = JSON.parse(resp[1].data).data
					console.log(that.AppraisePhoto,433)
					uni.showToast({
						title: '上传成功',
						icon: "none",
						duration: 2000
					})
				}).catch((err) => {
					console.log(err);
				})
			},
			goAppraise1(item){
				this.showAppraise1=true
				this.pingjia1=item
			},
			getAppraise1(){//添加拍卖订单评价
				request({
					url: 'api/confirmAuctionAppraise/get',
					data: {
						userTel:uni.getStorageSync("userTel"),
						auctionKnockdownId:this.pingjia1.auctionKnockdownId,
						sellerTel:this.pingjia1.sellerTel,
						commentsToSeller:this.Appraise1,
						scoreToSeller:this.value1,
						commodityId:this.pingjia1.commodityId,
						anonymous:this.cryptonym1,
						commentImg:this.AppraisePhoto1
					},
					success: (resp) => {
						request({
							url: 'api/changeAuctionStatus/get',
							data: {
								auctionKnockdownId:this.pingjia1.auctionKnockdownId
							},
							success: (resp) => {
								uni.showToast({
									title: '评价成功',
									icon: "none",
									duration: 2000
								})
								this.selectAuctionOrder()
							}
						})
					}
				})
				this.showAppraise1=false
			},
			CloseAppraise1(){
				this.showAppraise1=false
			},
			onChange1(event){
				this.value1=event.detail
			},
			anonymity1(){
				if(this.checked1==false){
					this.cryptonym1=1
					this.checked1=true
				}else if(this.checked1==true){
					this.cryptonym1=0
					this.checked1=false
				}
			},
			PutPhoto1(res){//上传拍卖订单评论图片
				let that = this
				let tempFilePaths = res.detail.file.thumb
				uni.uploadFile({
					url: 'http://112.74.185.144:8000/api/common/uploadfile',
					filePath: tempFilePaths,
					name: 'file',
					formData: {
						'file': tempFilePaths
					}
				}).then(resp => {
					that.AppraisePhoto1 = JSON.parse(resp[1].data).data
					console.log(that.AppraisePhoto1,433)
					uni.showToast({
						title: '上传成功',
						icon: "none",
						duration: 2000
					})
				}).catch((err) => {
					console.log(err);
				})
			},
			chat(userTel){
				uni.navigateTo({
					url:`/pages/chatpage/chatpage?receiverPhone=${userTel}`
				})
			},
			ComplainSeller(commodityId,sellerTel){
				uni.setStorageSync("BeComplainedGoods", commodityId)
				uni.setStorageSync("BeComplainedPeople", sellerTel)
				uni.redirectTo({
					url: '/pages/complaint/complaint'
				})
			},
			payment(id,type){//去支付
				uni.setStorageSync("orderId", JSON.stringify({id:id,type:type}))
			    console.log(uni.getStorageSync("orderId"),596)
				uni.redirectTo({
					url: '/pages/pay/pay'
				})
			}
		},
		onLoad(){
			this.selectOrder()
			this.selectAuctionOrder()
		}
	}
</script>

<style>
</style>
